<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #text {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }

        #text strong {
            background: yellow;
        }
    </style>
</head>
<body>
<div contenteditable="true" id="text">
    991年9月9日出生于上海，籍贯安徽合肥，中国内地男演员，毕业于中国人民解放军艺术学院2003级舞蹈系。2008年，因在李少红版《红楼梦》中饰演成年贾宝玉而被观众熟知并正式出道；2010年凭借电视剧《红楼梦》中表现获得年度BQ红人榜
</div>
<p id="tip"></p>
查找关键字<input type="text" id="searchTxt"><br>
替换关键字<input type="text" id="replaceTxt"><br>
<input type="button" id="btn1" value="查找">
<input type="button" id="btn2" value="替换">
<script>
    var oText = document.getElementById("text");
    var oTip = document.getElementById("tip");
    var oSearchTxt = document.getElementById("searchTxt");
    var oReplaceTxt = document.getElementById("replaceTxt");
    var oBtn1 = document.getElementById("btn1");
    var oBtn2 = document.getElementById("btn2");
    var oBtn3 = document.getElementById("btn3");
    var sOld = "";
    var onOff = true;
    //查找
    oBtn1.onclick = function () {
        if (onOff) {
            sOld = oText.innerHTML;
            onOff = false;
        }
        var sSearchTxt = oSearchTxt.value;
        var arr = sOld.split(sSearchTxt);
        oText.innerHTML = arr.join("<strong>" + sSearchTxt + "</strong>");
        oTip.innerHTML = "找到了 " + (arr.length - 1) + " 个\"" + sSearchTxt + "\"";
    }
    //替换
    oBtn2.onclick = function () {
        if (onOff) {
            sOld = oText.innerHTML;
            onOff = false;
        }
        var sSearchTxt = oSearchTxt.value;
        var sReplaceTxt = oReplaceTxt.value;
        var arr = sOld.split(sSearchTxt);
        oText.innerHTML = arr.join(sReplaceTxt);
        oTip.innerHTML = "替换了 " + (arr.length - 1) + " 个\"" + sSearchTxt + "\"";
    }
</script>
</body>
</html>